<template>

    <myDialog :visible="popupFlag" @close="closeHandle">

        <div style="padding: 150px 0;" @click.stop>
            <div class="editBox">
                <div class="header flex">
                    <div class="title">{{ title }}</div>
                    <img @click="closeHandle" src="../../assets/pauTypeClose.png">
                </div>
                <div class="formBox">
                    <el-form :model="payTypeForm" ref="payTypeRef" :rules="payTyperules">
                        <el-form-item label="类型名称" label-width="80" prop="name" label-position="left">
                            <el-input v-model="payTypeForm.name" autocomplete="off" ref="name"
                                placeholder="请填写类型名称"></el-input>
                        </el-form-item>

                        <el-form-item label="权重" label-width="80" prop="sortNum">
                            <el-input v-model="payTypeForm.sortNum" autocomplete="off" ref="sortNum"
                                placeholder="请输入联系电话"></el-input>
                        </el-form-item>

                        <!-- <el-form-item label="备注" :label-width="formLabelWidth" prop="isEffect">
            <el-input v-model="payTypeForm.isEffect" autocomplete="off" ref="isEffect"
                placeholder="请填写备注"></el-input>
        </el-form-item> -->
                    </el-form>
                </div>

                <div class="btnBox">
                    <button class="btn1" @click="popupFlag = false">取消</button>
                    <button class="btn2" @click="save">确认</button>
                </div>
            </div>
        </div>
    </myDialog>
</template>

<script>
import myPopupView from "@/components/commonModule/myPopupView.vue";
import myDialog from "../commonModule/myDialog.vue";
import { httpService } from "@/utils/httpService";
import { formatTime1 } from "@/utils/dateFormat";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {

    data() {
        return {
            // flag: false,
            queryData: {},
            approveData: [],
            popupFlag: false,
            title: "",
            btnFlag: false,
            payTypeForm: {
                id: "",
                name: "",
                sortNum: "",
                isEffect: "",
            },
            // 校验规则
            payTyperules: {
                name: vxRule(true, null, "blur"),
                // sortNum: vxRule(true, null, "blur"),
                // isEffect: vxRule(true, null, "blur"),
            },
        };
    },
    components: {
        myPopupView, myDialog
    },

    mounted() {
    },
    methods: {
        closeHandle() {
            this.popupFlag = false
            this.clear()
        },
        // close() {
        //     this.flag = false
        // },
        getDetail(id) {
            httpService(
                "/javaApi/paymentType/queryById", { id: id }, "get"
            ).then((data) => {
                console.log(data);
                this.payTypeForm = data
                // if (data.createTime) {
                //     this.queryData.createTime = formatTime1(data.createTime)
                // }
            });
        },
        clear() {
            this.payTypeForm.id = ""
            this.payTypeForm.name = ""
            this.payTypeForm.sortNum = ""
            this.payTypeForm.isEffect = ""
            this.popupFlag = false
            // this.title = ""
        },
        save() {
            if (this.btnFlag) {
                return
            }
            this.btnFlag = true
            const timer = setTimeout(() => {
                this.btnFlag = false
            }, 10000)

            this.$refs.payTypeRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("name", this.payTypeForm.name);
                    params.append("sortNum", this.payTypeForm.sortNum);
                    params.append("isEffect", 1);

                    if (this.payTypeForm.id) {
                        params.append("id", this.payTypeForm.id);
                        httpService("/javaApi/paymentType/edit", params, "post").then(
                            (data) => {
                                this.btnFlag = false
                                if (data.code == 200) {
                                    ElMessage.success("修改成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getPaymentTypeList();
                                } else {
                                    ElMessage.error("修改失败");
                                }
                            }
                        );
                    } else {
                        httpService("/javaApi/paymentType/add", params, "post").then(
                            (data) => {
                                this.btnFlag = false
                                if (data.code == 200) {
                                    ElMessage.success("添加成功");
                                    this.clear();
                                    //刷新父组件的数据
                                    this.$parent.getPaymentTypeList();
                                } else {
                                    ElMessage.error("添加失败");
                                }
                            }
                        );
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.editBox {
    width: 575px;
    height: 469px;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
}

.header {
    height: 64px;
    background: url(../../assets/payType_headerBg.png) no-repeat;
    background-size: cover;
    padding: 0 25px;
    justify-content: space-between
}

.title {
    color: #000;
    font-size: 18px;
    line-height: 18px;
    /* font-weight: bold;  */
}

.formBox {
    padding: 25px 35px 0 25px;
}

.el-form-item {
    margin-bottom: 15px;
}

.lel-form-item__label {
    text-align: left !important;
}

.btnBox {
    position: absolute;
    bottom: 25px;
    right: 35px;
}

.btnBox button {
    width: 97px;
    height: 35px;
    border-radius: 5px;
    font-size: 14px;
    margin-left: 10px;
}

.btn1 {
    border: 1px solid #007EFF;
    color: #007EFF;
    background-color: #0080ff15
}

.btn2 {
    background-color: #007EFF;
    border: none;
    color: #fff;
}
</style>